<template>
    <div ref="LinechartRef" class="chart"></div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import * as echarts from 'echarts';

const LinechartRef = ref<HTMLElement | null>(null);

const BarLineChart = () => {
    if (LinechartRef.value) {
        var myChart = echarts.init(LinechartRef.value);
        // 图表配置项
        var option = {
            title: {
                text: '近一周销售量',
                left: '3%', // 标题左侧间距
                textStyle: {
                    fontSize: 17, // 标题字体大小
                    color: '#1BA9BA',
                }
            },
            grid: {
                top: 60, // 设置上边距为0
                bottom: 40 // 设置下边距为0
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },

            legend: {
                icon: 'circle', // 将折线图的系列标题前面的图标形状设置为圆形
                textStyle: {
                    fontSize: 14
                },
                data: ['销售量', '销售额', 'circle']
            },
            xAxis: {
                type: 'category',
                data: ['2022-10-11', '2022-10-12', '2022-10-13', '2022-10-14', '2022-10-15', '2022-10-16', '2022-10-17'],
                axisLabel: {
                    interval: 0, //将 interval 设置为 0，表示不跳过任何标签，将所有标签都显示出来。
                    fontSize: 9 // 设置字体大小为 14px
                },
                axisTick: {
                    show: false // 隐藏纵轴刻度
                },
            },
            yAxis: [
                {
                    type: 'value',
                    name: '售票数量（张）',
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: '#1BA9BA'
                        }
                    }
                },
                {
                    type: 'value',
                    name: '销售额（元）',
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: '#DE799B'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '销售量',
                    type: 'line',
                    yAxisIndex: 0,
                    color: '#DE799B',
                    symbol: 'circle', // 设置点的形状为圆形
                    symbolSize: 8, // 设置点的大小为8
                    smooth: true, // 设置为true，使折线连接弯曲
                    data: [22, 43, 37, 40, 78, 90, 96]
                },
                {
                    name: '销售额',
                    type: 'bar',
                    color: '#1BA9BA',
                    yAxisIndex: 1,
                    barWidth: '18%',
                    itemStyle: {
                        borderRadius: [3, 3, 0, 0] // 设置上面两个角为圆角
                    },
                    data: [500, 300, 650, 400, 1300, 1520, 1300]
                }
            ]
        };

        // 设置图表配置项并渲染图表
        option && myChart.setOption(option);
    }
}

onMounted(() => {
    BarLineChart()
});
</script>

<style scoped lang="scss">
.chart {
    width: 100%;
    height: 100%;
    margin-top: 10px;
}
</style>